<template>
	<view>
		<view class="top" v-if="info.reason">
			<view class="title">
				<view class="name">
					{{type==1?'驳回原因':'申诉原因'}}
				</view>
			</view>
			<view class="content">
				<view class="input">
					{{info.reason}}
				</view>
			</view>
		</view>
		<view class="top">
			<view class="title">
				<view class="name">
					支付凭证
				</view>
				<image @click="show=true" v-if="true" src="../static/l1.png" class="img"></image>
				<image v-else src="../static/l2.png" class="img"></image>
			</view>
			<view class="content">
				<view class="image" @click="upload">
					<image :src="img_pre+info.voucher_link" mode=""></image>
				</view>
			</view>
		</view>
		<view class="button">
			<button v-if="type==1&&!info" type="default" @click="checkSafePasswordEmpty" class="b1">确认</button>
			<button v-if="type==2" type="default" @click="checkSafePasswordEmpty" class="b1">确认</button>
			<button v-if="type==1&&info" type="default" @click="checkSafePasswordEmpty" class="b1">重新上传</button>
			<button v-if="type==1&&info" type="default" @click="toast('催促成功，请耐心等待')" class="b2">催促确认</button>
		</view>
		<u-popup v-model="show" :closeable="true" borderRadius="10" mode="center">
			<view class="harvest">
				<view class="popup_top"></view>
				<view class="_view">
					<view class="title">
						驳回
					</view>
					<view class="list" v-for="(item,index) in 3" :key="index">
						<view class="icon" @click="active=index">
							<image v-if="active==index" src="../static/l4.png" mode=""></image>
							<image v-else src="../static/l3.png" mode=""></image>
						</view>
						<view class="text">
							我看不清图片
						</view>
					</view>
				</view>
				<button type="default" class="button2" @click="reject">确认提交</button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-keyboard mode="number" :dot-enabled="false" v-model="pay" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center">
					<view class="u-text-name">
						二级密码
					</view>
					<view class="u-text-text">
						您当前正在进行交易，为确保账户安全请输入二级 密码验证身份
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips"></view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				type: "",
				pay: false,
				show: false,
				password: "",
				active: 0,
				orderno: "",
				content: "1",
				info: {},
				cover: "1.png"
			}
		},
		onLoad(option) {
			than = this;
			than.zhujian_id = option.zhujian_id;
			if (option.type) {
				than.type = parseInt(option.type);
			}
			var url = "";
			switch (than.type) {
				case 1:
					url = 'api/kmb/applyDetails'
					break;
				case 2:
					url = 'api/kmb_apply/applyDetails'
					break;
				default:
					break;
			}
			than.post(url, {
				zhujian_id: than.zhujian_id
			}, function(data) {
				than.info = data;
			})
		},
		methods: {
			checkSafePasswordEmpty() {
				than.post("api/member/checkSafePasswordEmpty", null, function(data) {
					if (parseInt(data) == 0) {
						than.toast("未设置二级密码")
						uni.navigateTo({
							url: "/pages/htmlA/setting/twopassword"
						})
					} else {
						than.pay = true;
					}
				})
			},
			reject() {
				than.post("api/kmb_apply/reject", {
					content: than.content,
					zhujian_id: than.zhujian_id,
				}, function(data) {
					than.info = data;
					than.toast("驳回成功")
					than.show = false;
				})
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					switch (than.type) {
						case 1:
							than.post("api/kmb/submitLinkAgain", {
								zhujian_id: than.zhujian_id,
								cover: than.cover,
								password: than.password
							}, function(data) {
								than.pay = false;
								than.toast("确认成功")
								setTimeout(function() {
									uni.navigateBack()
								}, 1500);
							})
							break;
						case 2:
							than.post("api/kmb_apply/agreeApply", {
								zhujian_id: than.zhujian_id,
								password: than.password
							}, function(data) {
								than.pay = false;
								than.toast("确认成功")
								setTimeout(function() {
									uni.navigateBack()
								}, 1500);
							})
							break;
						default:
							break;
					}
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
		}
	}
</script>

<style lang="less">
	.harvest {
		width: 535rpx;
		text-align: center;
		background: linear-gradient(0deg, #FFFFFF, #E3ECFF, #E3EBFE);

		.popup_top {
			height: 30rpx;
		}

		._view {
			background: #FFFFFF;
			margin: 0 30rpx 30rpx;

			.title {

				height: 114rpx;
				line-height: 114rpx;
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.list {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 70rpx;

				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50rpx;
					height: 50rpx;
					margin-right: 31rpx;

					image {
						width: 30rpx;
						height: 30rpx;

					}
				}

				.text {

					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}

		}

		.button2 {
			margin: 20rpx auto 0;
			width: 314rpx;
			height: 80rpx;
			color: #835529;
			background: linear-gradient(0deg, #FBDE80, #FDEBA1);
			box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 80rpx;
		}

	}


	page {
		background: #F4F4F7;
	}

	.button {
		padding: 28rpx 0;
		display: flex;

		.b1 {
			width: 314rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			background: #FEC31D;
			box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
			border-radius: 40rpx;
		}

		.b2 {
			width: 314rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #FEC31D;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			border: 2rpx solid #FEC31D;
			box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
			border-radius: 40rpx;
		}
	}

	.top {
		padding: 0 36rpx;

		.title {
			height: 110rpx;
			display: flex;
			align-items: center;

			.name {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.img {
				width: 52rpx;
				height: 52rpx;
				margin-left: 23rpx;
			}
		}

		.content {
			background: #FFFFFF;
			border-radius: 20rpx;

			.input {
				padding: 36rpx 26rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #555555;

			}

			.image {
				margin: auto;
				width: 497rpx;
				height: 910rpx;
				padding: 13rpx 0 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
